<template>
  <div class="app-container">
    <div class="head-container search-box" style="margin-left: 136px;margin-top: 20px">
      <el-button type="primary" @click="handleClickDeal('add')" class="el-icon-plus">&nbsp;新增流程节点</el-button>
    </div>
    <div class="head-container" style="margin-left: 20px; width: 1580px; margin:0 auto">
      <el-card>
        <el-table
          ref="genTable"
          v-loading="listLoading"
          :data="list"
          border
          fit
          highlight-current-row
          style="width: 100%;"
          size="medium"
          :cell-style="{'text-align':'center'}"
          :header-cell-style="{textAlign: 'center'}"
        >
          <el-table-column type="index" width="50" label="序号"/>
          <el-table-column prop="nodeName" label="日志节点名称"/>
          <el-table-column prop="taskDefKey" label="节点编码"/>
          <el-table-column prop="expression" label="表达式"/>
          <el-table-column prop="sort" label="排序"/>
          <el-table-column align="left" label="操作" width="250">
            <template slot-scope="scope">
              <el-button style="margin-left: 10px" type="primary" size="mini"
                         @click="handleClickDeal('check',scope.row)">查看
              </el-button>
              <el-button style="margin-left: 10px" type="primary" size="mini"
                         @click="handleClickDeal('edit',scope.row)">编辑
              </el-button>
              <el-button style="margin-left: 10px" type="danger" size="mini" @click="handleDelete(scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>

    <Detail :postDetail="postDetailData" @reloadList="listTable()"></Detail>

  </div>
</template>

<script>
  import step from '@/api/wf/step'
  import msgUtil from '@/utils/msgUtil'
  import PageSelect from '@/components/PageSelect'
  import Detail from './step_detail'

  export default {
    props: {
      procDefKey: {
        type: String,
        default: ''
      },
      id: {
        type: String,
        default: null
      },
    },
    components: {PageSelect, Detail},
    data() {
      return {
        isEdit: false,
        tableForm: {
          procDefKey: this.procDefKey,
          moduleId: null
        },
        selTableId: 0, // 选中行的tableId
        selType: 0, // 选中的创建文件类型
        tableKey: 0,
        list: null,
        listLoading: false,
        total: 0,
        postDetailData: {
          show: false,
          type: '',
          params: {}
        }
      }
    },
    created() {
      this.listTable()
    },
    methods: {
      handleClickDeal(type, row) {
        switch (type) {
          case 'add':
            this.postDetailData = {
              show: true,
              type: 'add',
              params: {procDefKey: this.procDefKey, xmlId: this.id}
            }
            break
          case 'edit':
            this.postDetailData = {
              show: true,
              type: 'edit',
              params: {procDefKey: this.procDefKey, detailId: row.id, xmlId: this.id}
            }
            break
          case 'check':
            this.postDetailData = {
              show: true,
              type: 'check',
              params: {procDefKey: this.procDefKey, detailId: row.id, xmlId: this.id}
            }
            break
        }
      },
      // 删除
      handleDelete(row) {
        msgUtil.confirm('确认删除表数据?').then(async () => {
          const ids = []
          ids.push(row.id)
          await step.del(ids)
          msgUtil.success2('删除成功!')
          this.listTable()
        })
      },
      listTable() {
        this.listLoading = true
        step.listPage({procDefKey: this.procDefKey}).then(response => {
          this.list = response.data.content
          this.listLoading = false
          let active
          if (this.list && this.list.length) {
            active = 1
          } else {
            active = 0
          }
          this.$emit('changStatus', active);
        })
      }
    }
  }
</script>

<style type="scss">
  .search-box {
    display: flex;
    flex: 1;
    flex-direction: row;
  }

  .search-box > label {
    line-height: 35px;
    margin-right: 10px;
  }
</style>
